<html>
<head>
  <title>Messenger</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    .settings {
        background-image:url(ext/examples/shared/icons/fam/user.png);
	}
	#north{
		padding:2px 0 !important;
		background-color:#dfe8f6;
		font-size:16px;
	}
	#south{
		padding:5px;
	}
	#input_message{
		width:100%;
		font-size:22px;
		padding:4px 10px;
		margin:0 !important;
	}
	#center2{
		padding:5px;
	}
	#center2 p {
		margin-bottom:5px;
	}
	.add16 {
	    background-image: url(ext/examples/button/images/add16.gif) !important;
	}
.user {
background-image:url("ext/examples/shared/icons/fam/user.gif") !important;
}
.user-girl {
background-image:url("ext/examples/shared/icons/fam/user_female.gif") !important;
}
ul, li{
	list-style:none;
}
    </style>
    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            {
                region: 'north',
                contentEl: 'north',
                height: 32, // give north and south regions a height
                collapsible: false,
				margins: '0 0 0 0',
                border: false,
            }, {
                region: 'south',
                contentEl: 'south',
                height: 50,
                collapsible: false,
                margins: '0 0 0 0'
            }, {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'Kontaltliste',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 0',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [{
                    title: 'Alle Kontakte',
					html: '<div class="x-tree-root-node"><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-unselectable  x-tree-node-expanded " ext:tree-node-id="xnode-39"><span class="x-tree-node-indent"></span><img class="x-tree-ec-icon x-tree-elbow-minus" src=""><img unselectable="on" class="x-tree-node-icon" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Freunde</span></a></div><ul style="" class="x-tree-node-ct"><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-41"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Anton</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-42"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user-girl" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Frieda</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-43"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Bert</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-44"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Jochen</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-45"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user-girl" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Laura</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-46"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Fred</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-47"><span class="x-tree-node-indent"><img class="x-tree-elbow-line" src=""></span><img class="x-tree-ec-icon x-tree-elbow-end" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Bob</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-unselectable  x-tree-node-expanded" ext:tree-node-id="xnode-40"><span class="x-tree-node-indent"></span><img class="x-tree-ec-icon x-tree-elbow-end-minus" src=""><img unselectable="on" class="x-tree-node-icon" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Familie</span></a></div><ul style="" class="x-tree-node-ct"><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-48"><span class="x-tree-node-indent"><img class="x-tree-icon" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user-girl" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Kelly</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-49"><span class="x-tree-node-indent"><img class="x-tree-icon" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user-girl" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Sara</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-50"><span class="x-tree-node-indent"><img class="x-tree-icon" src=""></span><img class="x-tree-ec-icon x-tree-elbow" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">Zack</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li><li class="x-tree-node"><div unselectable="on" class="x-tree-node-el x-tree-node-leaf x-unselectable " ext:tree-node-id="xnode-51"><span class="x-tree-node-indent"><img class="x-tree-icon" src=""></span><img class="x-tree-ec-icon x-tree-elbow-end" src=""><img unselectable="on" class="x-tree-node-icon user" src=""><a tabindex="1" href="" class="x-tree-node-anchor" hidefocus="on"><span unselectable="on">John</span></a></div><ul style="display: none;" class="x-tree-node-ct"></ul></li></ul></li></div> <br /> <table cellspacing="0" class="x-btn  x-btn-text-icon  x-btn-over " id="ext-comp-1013" style="width: auto;margin:0 0 0 5px"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" class="x-btn-text add16" id="ext-gen33">Kontakt hinzuf&uuml;gen</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>',
                    border: false,
                    iconCls: 'settings'
                }]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.TabPanel({
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center1',
                    title: 'Startseite',
                    autoScroll: true
                }, {
                    contentEl: 'center2',
                    title: 'Frieda',
                    closable: true,
                    autoScroll: true
                }]
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it 
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel' 
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
		});
    });
    </script>
</head>
<body>
    <div id="north" class="x-hide-display">
		<p style='overflow:hidden'><b>OSZIMT Messenger</b> <span style='float:right'>angemeldet als <b><u>igor</u></b> (<a href='#'>Einstellungen</a> | <a href='#'>Abmelden</a>)</span></p>
    </div>
    <div id="west" class="x-hide-display">
        <p>Hi. I'm the west panel.</p>
    </div>
    <div id="center2" class="x-hide-display">
        <p style='color:red'>Frieda: Blah blah blah</p>
        <p style='color:blue'>Igor: Blupp blupp</p>
    </div>
    <div id="center1" class="x-hide-display">
        <p>Startseite (?)</p>
    </div>
	<div id="south" class="x-hide-display">
		<input type='text' id='input_message' />
    </div>
</body>
</html>
